<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>处方详情</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
</head>
<body>
<div id="app">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="height: 100px">

        </div>
        <div class="layui-card-body">
            <hr class="layui-bg-green">
            <h1 style="text-align: center">处方基本信息</h1>
            <hr class="layui-bg-orange">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>患者编号</th>
                    <th>开具日期</th>
                    <th>支付状态</th>
                    <th>总计金额</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><a href="#" @click="toInpatient(recipeMedi.sourceId)">{{recipeMedi.sourceId}}</a></td>
                    <td v-text="dateFormat(recipeMedi.recipeMediDate,'yyyy-MM-dd hh:mm:ss')"></td>
                    <td v-if="recipeMedi.payStatus">已支付</td>
                    <td v-if="!recipeMedi.payStatus" style="color:#FF5722 ">未支付</td>
                    <td>总计：￥{{recipeMedi.recipeMediTotal}}</td>
                </tr>
                </tbody>
            </table>
            <hr class="layui-bg-orange">
            <h3 style="text-align: center">药品条目列表</h3>
            <hr class="layui-bg-orange">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="" @click="selectAllorNot" v-model="checked" lay-skin="primary">
                        <a href="#" @click="delSelected(index)" class="layui-btn layui-btn-sm layui-btn-danger">删除选中</a>
                    </th>
                    <th>药品条目编号</th>
                    <th>药品名称</th>
                    <th>生产商</th>
                    <th>规格</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>是否拿药</th>
                    <th colspan="2">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item ,index) in list">
                    <td>
                        <input v-model="checkModel" :value="item.mediItemId" type="checkbox" name="" lay-skin="primary">
                    </td>
                    <td><a href="#">{{item.mediItemId}}</a></td>
                    <td>{{item.medicine.mediName}}</td>
                    <td>{{item.medicine.mediManu}}</td>
                    <td>{{item.medicine.mediStand}}</td>
                    <td>{{item.medicine.mediPrice}}</td>
                    <td>{{item.amount}}</td>
                    <td>{{item.mediItemSubtotal}}</td>
                    <td v-if="item.mediItemStatus">已拿药</td>
                    <td v-if="!item.mediItemStatus" style="color:#FF5722 ">未拿药</td>
                    <td>
                        <a href="#" @click="updateMediItem(index)" class="layui-btn">修改</a>
                        <button type="button" @click="delMediItem(index)" class="layui-btn ">
                            <i class="layui-icon">&#xe640;</i>
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
            <br/>
        </div>
    </div>
</div>
<script>

    var app = new Vue({
        el: "#app",
        data: {
            list: [],
            recipeMedi: {},
            recipeMediId: '',
            checked: false,
            checkModel: []
        },
        created() {
            //生命周期函数，已初始化就调用加载数据方法
            this.getData();
        },
        methods: {
            //全选和全不选
            selectAllorNot: function () {
                if (this.checked) {
                    this.checkModel = [];
                } else {
                    for (let i = 0; i < this.list.length; i++) {
                        if (this.checkModel.indexOf(this.list[i].mediItemId) == -1) {
                            this.checkModel.push(this.list[i].mediItemId)
                        }
                    }
                }
            },
            //删除被选中的条目
            delSelected: function () {
                var that=this;
                if (this.checkModel.length === 0) {
                    alert("至少选中一个")
                } else {
                    if (confirm("是否删除所选项?")) {
                        let params = '?';
                        for (let i = 0; i < this.checkModel.length; i++) {
                            if ((i + 1) !== this.checkModel.length) {
                                params += "mediItemId=" + this.checkModel[i] + "&"
                            } else {
                                params += "mediItemId=" + this.checkModel[i]
                            }
                        }
                        //发送异步请求，删除成功后再次返回此页面刷新数据
                        axios.get("http://localhost:8080/mediItem/delMediItemByIds" + params).then(function (resp) {
                            if (resp.data.data === "success") {
                                alert("删除成功");
                                that.getData();
                            } else {
                                alert("删除失败，服务维护中")
                            }
                        });
                    }
                }
            },
            getData: function () {
                let recipeMediId = this.getUrlKey("recipeMediId");
                this.recipeMediId = recipeMediId;
                var that = this;
                axios.get("http://localhost:8080/recipeMedi/getRecipeMediById?recipeMediId=" + recipeMediId).then(function (resp) {
                    that.list = resp.data.data.mediItemList;
                    that.recipeMedi = resp.data.data;

                });
            },
            updateMediItem: function (index) {
                //跳转到修改药品条目信息界面
                window.location.href = "updateMediItem.html?mediItemId=" + this.list[index].mediItemId
            },
            delMediItem: function (index) {
                if (confirm("是否删除？")) {
                    //发送异步请求，删除成功后再次返回此页面刷新数据
                    axios.get("http://localhost:8080/mediItem/delMediItemByIds?mediItemId=" + this.list[index].mediItemId).then(function (resp) {
                        if (resp.data.data === "success") {
                            alert("删除成功")
                        } else {
                            alert("删除失败，服务维护中")
                        }
                    });
                }
            },
            getUrlKey: function (name) {
                //构造一个含有目标参数的正则表达式对象
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                //匹配目标参数
                var r = window.location.search.substr(1).match(reg);
                //返回参数
                if (r != null) {
                    return unescape(r[2]);
                } else {
                    return null;
                }
            },
            dateFormat: function (value, fmt) {
                let getDate = new Date(value);
                let o = {
                    'M+': getDate.getMonth() + 1,
                    'd+': getDate.getDate(),
                    'h+': getDate.getHours(),
                    'm+': getDate.getMinutes(),
                    's+': getDate.getSeconds(),
                    'q+': Math.floor((getDate.getMonth() + 3) / 3),
                    'S': getDate.getMilliseconds()
                };
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
                }
                for (let k in o) {
                    if (new RegExp('(' + k + ')').test(fmt)) {
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                    }
                }
                return fmt;
            }
        },
        //使用watch函数来监听checkModel的属性
        watch: {
            checkModel() {
                return this.checkModel.length == this.list.length ? true : false;
            }
        }
    })
</script>
</body>
</html>